import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';


export default class ViewJson extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            list: []
        };

        this.loadJson = (param) => {
            // console.log('param', param);
            let url = 'http://127.0.0.1:3000/findAll?type=' + param
            $.ajax({
                url: url,
                dataType: 'json',
                cache: false,
                success: (result) => {
                    this.setState({
                        list: result
                    });
                }
            });
        };

        this.saveUser = (u) => {
            // console.log('param', u);
            let url = 'http://127.0.0.1:3000/add';
            let flag = false;
            $.ajax({
                url: url,
                type: 'POST',
                data: JSON.stringify(u),
                contentType: "application/json",
                async:false,
                dataType: 'json',
                cache: false,
                success: (result) => {
                    flag = result.rs;
                    this.loadJson('t');
                }
            });
            return flag;
        };

        this.aa = (list) =>{
            let ul = this.refs.ul
        };

        this._show = (_id, e) => {
            //let tmp = document.querySelector(_id);
            //let tmp = ReactDOM.findDOMNode(this.refs);
            let tmp = this.refs[_id];
            //$(tmp).attr('test','abc');

            console.log(tmp);
            console.log(tmp.outerHTML);
            console.log(e);
            // if(e.target.innerText=='show'){
            //     e.target.innerText=='hid';
            //     this.refs[_id].style.display="none"
            // }else{
            //     e.target.innerText=='show';
            //     this.refs[_id].style.display=""
            // }

            if ($(tmp).text == 'show') {
                $(tmp).text('hidden');
                $(tmp).hide();
            } else {
                $(tmp).show();
            }
        };
    }

    //
    componentDidMount() {
        // console.log('ViewJson', '组件被插入DOM后执行');
        //this.loadJson(this.props.param);
    }

    //组件更新后执行
    componentDidUpdate(prevProps, prevState) {
        //console.log('viewJson 组件更新后执行');
    }

	//组件发生改变时执行
	shouldComponentUpdate(nextProps, nextState){

        // if(this.props!==nextProps){
        //      console.log('view jonn 组件发生改变时执行',this.props,nextProps);
        //     return true;
        // }

        if(this.state.list!==nextState.list){
            console.log('view jonn 组件发生改变时执行',this.state.list,nextState.list);
            return true;
        }
		return false;
	}    

    render() {
        return (
            <div ref="pp">
                <div className="table-responsive">
                    <table className="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Email</th>
                                <th>Password</th>
                                <th>URL</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.list.map(function (item,i) {
                                return <tr key={item._id}>
                                    <td>{i+1}</td>
                                    <td>{item.email}</td>
                                    <td>{item.passwd}</td>
                                    <td>{item.url}</td>
                                </tr>
                            })}
                        </tbody>
                    </table>
                </div>
                <button type="button" style={{display:"none"}} className="btn btn-default" onClick={this.props.callBack}>CallBack</button>
                <button type="button" style={{display:"none"}} className="btn btn-default" onClick={this._show.bind(this, 'pp')}>show</button>
            </div>
        )
    }
}
